* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --distance: 0.375rem;
}

body {
  margin: 0;
  padding: 0;
  /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
  background-size: 100% 100%;
  background: url(../images/home_bg.png) repeat;
  color: #fff;
}

ul {
  list-style: none;
}

#tableList {
  margin-top: 0.4375rem;
}

.tableList_item {
  width: 4.975rem;
  height: 0.625rem;
  line-height: 0.625rem;
  margin: 0 auto;
  font-size: 0.225rem;
  display: flex;
}

.odd {
  background-color: rgba(31, 198, 255, 0.15);
}

.tableList_name {
  width: 35%;
  padding-left: 0.2rem;
  display: inline-block;
  color: rgba(180, 192, 204, 1);
}

.tableList_value {
  width: 65%;
  padding-left: 0.0625rem;
}

header {
  height: 0.7875rem;
  background: url(../images/home_top.png) no-repeat top center;
  background-size: 100% 100%;
  display: flex;
}

/* 时间和日期 */

#time {
  width: 5.6875rem;
  height: 0.5rem;
  display: flex;
}

#time_left {
  width: 0.925rem;
  height: 0.3rem;
  border-right: 1px #1fc6ff solid;
  line-height: 0.3rem;
  margin-top: 0.2125rem;
  margin-left: 1.25rem;
  font-size: 0.2rem;
  color: rgba(31, 198, 255, 1);
  font-weight: bold;
}

#time_right {
  height: 0.225rem;
  line-height: 0.225rem;
  margin-top: 0.2375rem;
  margin-left: 0.0625rem;
  font-size: 0.15rem;
  font-weight: bold;
  color: #1fc6ff;
}

#title {
  width: 12.6125rem;
  height: 0.7875rem;
  line-height: 0.7875rem;
  text-align: center;
  font-size: 0.4rem;
  font-weight: bold;
}

#user {
  width: 5.6875rem;
  height: 0.7875rem;
  line-height: 0.7875rem;
  /* text-align: right; */
  display: flex;
  /* 从右开始排列 */
  justify-content: flex-end;
}

#user_name {
  width: 1.875rem;
  font-size: 0.2rem;
  margin-right: 0.5625rem;
  /* display: inline-block; */
}

/* 查看历史 */

#btn_history {
  width: 1.1rem;
  height: 0.5375rem;
  background-image: url(../images/home_top_btn.png);
  background-color: transparent;
  background-size: cover;
  color: #1fc6ff;
  margin-right: 0.3125rem;
  margin-top: 0.125rem;
  border: none;
  /* display: inline-block; */
}

/* 设置关机 */

#btn_close {
  width: 1.1rem;
  height: 0.5375rem;
  background-image: url(../images/home_top_btn.png);
  background-color: transparent;
  background-size: cover;
  color: #1fc6ff;
  margin-right: 0.3125rem;
  margin-top: 0.125rem;
  border: none;
  /* display: inline-block; */
}

/* 主体 */

.mainbox {
  min-width: 12.8rem;
  max-width: 24rem;
  padding: 0.125rem 0.125rem 0;
  display: flex;
  margin-top: 38px;
}

.panel {
  position: relative;
}

.column1 {
  margin-left: 0.3625rem;
}

.column2 {
  margin-left: 0.475rem;
}

.column3 {
  margin-left: 0.4375rem;
}

/* 所有模块的标题 */

.panel_tips {
  width: 5.375rem;
  height: 0.625rem;
  font-size: 0.25rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 0.625rem;
  padding-left: 0.25rem;
}

/* 录入信息 */

.inputInfo {
  width: 5.375rem;
  height: 2.6875rem;
  margin-bottom: 0.35rem;
  background: url(../images/home_pop1.png) no-repeat;
  background-size: cover;
}

/* 扫码 */

#panel_code {
  font-size: 0.25rem;
  text-align: left;
  padding-left: 0.2375rem;
  line-height: 2.0625rem;
}

.input_control {
  width: 4.0875rem;
  font-size: 0.25rem;
  line-height: 0.625rem;
  border: 1px #0da0d1 solid;
  background-color: rgba(31, 198, 255, 0.1);
  border-radius: 0px 0px 0px 0px;
  color: white;
}

.input_control:focus {
  border: 1px #1fc6ff solid;
  outline: 0;
  background-color: rgba(31, 198, 255, 0.1);
}

/* .input_control:focus {
  border: 1px #1fc6ff solid;
} */

/* 患者信息 */

.patientInfo {
  width: 5.375rem;
  height: 5.2375rem;
  margin-bottom: 0.35rem;
  background: url(../images/home_pop2.png) no-repeat;
  background-size: cover;
}

/* 提示 */

.tips {
  width: 5.375rem;
  height: 2.9375rem;
  background: url(../images/home_pop3.png) no-repeat;
  background-size: cover;
}

#prompt_content {
  width: 5.375rem;
  height: 2.3125rem;
  padding-top: 0.5625rem;
  padding-left: 0.2375rem;
  padding-right: 0.6125rem;
  padding-bottom: 0.6rem;
  font-size: 0.25rem;
  font-weight: bold;
}

/* 摄像区域 */

.area_video {
  width: 11.5125rem;
  height: 11.5625rem;
  border: 1px solid rgba(31, 198, 255, 0.5);
  position: relative;
}

#video_show {
  width: 90%;
  height: 8.0375rem;
  /* border: 1px solid white; */
  margin: 0 auto;
  margin-top: 28px;
  /* background-color: #1fc6ff; */
  position: relative;
}

#video {
  width: 100%;
  height: 100%;
  /* 解决图像不能铺满的情况 */
  /* object-fit: fill; */
}

#cameraDiv {
  width: 100%;
  height: 100%;
}

/* 遮罩区 */

#cover {
  position: absolute;
  width: 100%;
  height: 1.9875rem;
  background-image: url(../images/photo_mask.png);
  bottom: -0.1875rem;
  display: flex;
  border-bottom: 1px solid #1fc6ff;
}

#cover_tips {
  width: 30%;
  height: 1.9875rem;
  line-height: 1.9875rem;
  padding-left: 0.3625rem;
  font-size: 0.225rem;
}

#cover_nums {
  width: 70%;
  height: 1.9875rem;
  line-height: 1.9875rem;
  font-size: 0.8rem;
  color: #1fc6ff;
  text-align: right;
  padding-right: 0.55rem;
}

/* 拍照功能区域 */

#video_function {
  width: 90%;
  height: 2.25rem;
  margin: 0 auto;
  display: flex;
  margin-top: 35px;
  position: relative;
}

.swiper-father {
  width: 75%;
  height: 2.25rem;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1fc6ff;
}

.swiper {
  width: 85%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.swiper-button-next {
  margin-right: 1px;
}

#takephone_area {
  width: 30%;
  text-align: right;
}

#line {
  width: 0.25rem;
  height: 100%;
  position: absolute;
  margin-left: 74%;
  border-right: 1px solid #1fc6ff;
}

/* 拍照按钮 */

#btn_takephone {
  width: 2.0875rem;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: right;
  /* border-left: 1px solid #1fc6ff; */
}

/* 当日信息  */

.dayInfo {
  width: 5.375rem;
  height: 3.4875rem;
  background: url(../images/home_pop4.png) no-repeat;
  background-size: cover;
}

#curday_info_content {
  width: 5.375rem;
  height: 2.8625rem;
}

/* 称重 */

.weight {
  width: 5.375rem;
  height: 4.6rem;
  margin-top: 0.3rem;
  background: url(../images/home_pop5.png) no-repeat;
  background-size: cover;
}

#weigh_info_content {
  width: 5.375rem;
  height: 3.975rem;
  display: flex;
  flex-wrap: wrap;
}

.weigh_info_content_list {
  width: 2.65rem;
  height: 1.9875rem;
  /* border: 1px solid white; */
  /* 控制水平排列 */
  display: flex;
}

/* 统一对图标区域位置处理 */

.weigh_info_content_icon {
  width: 40%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  /* background-position-x: 0.2875rem; */
}

/* 单独对每个区域位置处理 */

.weigh_info_content_list:nth-child(1) {
  margin-top: var(--distance);
}

.weigh_info_content_list:nth-child(2) {
  margin-top: var(--distance);
}

.weigh_info_content_list:nth-child(3) {
  margin-top: calc(var(--distance) * -1);
}

.weigh_info_content_list:nth-child(4) {
  margin-top: calc(var(--distance) * -1);
}

/* 再单独选择背景图片 */

.icon1 {
  background-image: url(../images/weight_ying.png);
}

.icon2 {
  background-image: url(../images/weight_dang.png);
}

.icon3 {
  background-image: url(../images/weight_wu.png);
}

.icon4 {
  background-image: url(../images/weight_shi.png);
}

/* 字体区域总体布局和设置 */

.weigh_info_content_word {
  width: 60%;
  text-align: center;
}

.weigh_info_content_word p:nth-child(1) {
  width: 100%;
  padding-top: 40%;
  line-height: 0.25rem;
  color: #b4c0cc;
  font-size: 0.175rem;
  text-align: left;
  padding-left: 0.0625rem;
}

.weigh_info_content_word p:nth-child(2) {
  width: 100%;
  font-weight: bold;
  line-height: 0.375rem;
  margin-top: 0.125rem;
  font-size: 0.4rem;
  color: #ffffff;
  text-align: left;
  padding-left: 0.0625rem;
}

/* 单独设置字体颜色 */

.word2 p:nth-child(2) {
  color: #19e36a;
}

/* 调配单状态 */

.deployment_statue {
  width: 5.375rem;
  height: 2.8125rem;
  margin-top: 0.3375rem;
  background: url(../images/home_pop6.png) no-repeat;
  background-size: cover;
}

#deployment_statue_content {
  width: 5.375rem;
  display: flex;
}

#deployment_statue_content > div {
  width: 50%;
  height: 2.1875rem;
}

#btn_ok {
  background-image: url(../images/pass_btn.png);
  background-repeat: no-repeat;
  background-position: center;
}

#btn_cancel {
  background-image: url(../images/reject_btn.png);
  background-repeat: no-repeat;
  background-position: center;
}

/* 公司名称 */

#footer_company {
  font-weight: bold;
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.15rem;
}

/* 4个角变粗实现 */

/* 左上 */

.area_video span:nth-child(1) {
  position: absolute;
  left: -3px;
  top: -3px;
  padding: 20px;
  border-style: solid;
  border-color: #1fc6ff;
  border-width: 4px 0 0 4px;
}

/* 右上 */

.area_video span:nth-child(2) {
  position: absolute;
  right: -3px;
  top: -3px;
  padding: 20px;
  border-style: solid;
  border-color: #1fc6ff;
  border-width: 4px 4px 0 0;
}

/* 右下 */

.area_video span:nth-child(3) {
  position: absolute;
  right: -3px;
  bottom: -3px;
  padding: 20px;
  border-style: solid;
  border-color: #1fc6ff;
  border-width: 0 4px 4px 0;
}

/* 左下 */

.area_video span:nth-child(4) {
  position: absolute;
  left: -3px;
  bottom: -3px;
  padding: 20px;
  border-style: solid;
  border-color: #1fc6ff;
  border-width: 0 0 4px 4px;
}

/* 遮罩弹窗固定css */

body,
th,
td,
input,
button,
textarea {
  font-family: "Source Han Sans CN-Bold";
}

.cover_main {
  display: none;
  background: #040711;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14.1375rem;
  height: 10.3875rem;
  border: 1px solid lightblue;
  /* overflow: auto; */
}

.cover_cover {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 0.75;
  z-index: 1;
}

/* 遮罩弹窗 */

#cover_medince {
  width: 14.1375rem;
  height: 10.3875rem;
  border: 1px solid #1fc6ff;
  opacity: 0.9;
  margin: auto;
  display: flex;
}

#prePage {
  width: 20%;
  height: 100%;
  background-image: url(../images/pre_btn.png);
  background-repeat: no-repeat;
  background-position: center;
}

#page_info {
  width: 60%;
  height: 100%;
}

#page_info_top {
  width: 100%;
  height: 20%;
}

#page_info_mid {
  width: 100%;
  height: 60%;
  border: 1px solid white;
}

#page_info_mid_img {
  width: 100%;
  height: 100%;
}

#page_info_bottom {
  width: 100%;
  height: 20%;
  text-align: center;
}

#page_info_bottom > button {
  width: 1.5rem;
  height: 0.625rem;
  background: #0e526e;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  color: #fff;
  font-size: 24px;
  margin-top: 51px;
  margin-right: 37px;
  border: none;
}

#page_info_bottom button:nth-child(1) {
  background: #be2929;
}

#nextPage {
  width: 20%;
  height: 100%;
  background-image: url(../images/next_btn.png);
  background-repeat: no-repeat;
  background-position: center;
}

#animations {
  /* 动画名 */
  animation-name: scaleAnimation;
  /* 动画时长 */
  animation-duration: 2s;
  /* 动画过渡 */
  transition-timing-function: ease-in-out;
}

/*  动画设置 */

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.75);
  }
  50% {
    transform: scale(0.5);
  }
  75% {
    transform: scale(0.25);
  }
}
